<!--  -->
<template>
    <div class=''>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark" style="background: white;width: 1300px;height:50px;border-radius: 5px;overflow: hidden;border-bottom: 2px solid #F5F7F9">
                 <div style="margin-left: 30px;margin-top: 10px">社保方案</div>
            </div></el-col>
            <el-col :span="24"><div class="grid-content bg-purple-dark" style="background: white;width: 1300px;border-radius: 5px">
                <el-button type="primary" style="height: 30px;margin-left: 30px;margin-top: 10px" @click="insets">新增</el-button>
                <el-button type="success"  style="height: 30px" @click="deleteBatch()">批量删除</el-button>
                <!--数据-->
                <el-table
                        v-loading="listLoading"
                        border
                        :data="socialData"
                        element-loading-text="数据加载中"
                        fit
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        style="width: 95.9%;margin-top: 20px;margin-left: 30px">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="saId"
                            label="序号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="schemeName"
                            label="方案名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="usePeople"
                            label="使用人数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="paymentItem"
                            label="缴纳项目"
                            width="300">
                    </el-table-column>
                    <el-table-column label="状态" width="90"  align="center">
                        <template slot-scope="p">
                            <el-switch
                                    v-if="p.row.usePeople !== '0'"
                                    disabled
                                    v-model="p.row.status"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="switchSale(p.row.status,p.row.saId)"
                            >
                            </el-switch>
                            <el-switch
                                    v-if="p.row.usePeople == '0'"
                                    v-model="p.row.status"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="switchSale(p.row.status,p.row.saId)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="创建时间"
                            width="200">
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="openSocialPeople(scope.row.saId)" icon="el-icon-s-custom">
                                关联人员
                            </el-button>
                            <el-button type="warning" size="mini" @click="handleEdit(scope.row.saId)" icon="el-icon-edit">
                                修改
                            </el-button>
                            <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="deleteSocial(scope.row)"
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        :current-page.sync="pages.page"
                        :page-size="pages.pagesize"
                        :page-sizes="[10, 20, 30, 40]"
                        :total="total"
                        background
                        layout="total, sizes ,prev, pager, next, jumper"
                        style="padding: 30px 0; margin-left: 800px"
                        @current-change="findAllSocial"
                        @size-change="handleSizeChange"
                />
                <!--关联人员信息弹出信息-->
                <el-dialog title="关联人员信息" :visible.sync="socialPeople" width="1000px">
                <!--模糊查-->
                    <el-form :inline="true" :model="map" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="map.mess" placeholder="请输入姓名/工号/证件号/手机号" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="map.departmentName" placeholder="请输入部门"></el-input>
                            <img @click="openMenus()" src="https://edu-2004-0926.oss-cn-beijing.aliyuncs.com/%E6%A0%91%E5%BD%A2%E6%8E%A7%E4%BB%B6.png" style="width: 15px;height: 15px; position: absolute; top: 7px; left: 146px;">
                        </el-form-item>
                        <el-select v-model="map.staffType" placeholder="请选择">
                            <el-option label="正式" value=1></el-option>
                            <el-option label="试用" value=0></el-option>
                        </el-select>
                        <el-form-item>
                            <el-button type="primary" style="margin-left: 20px" @click="selstaffBySocial()">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="margin-left: 10px" @click="resetting()">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-dialog title="选择部门" :visible.sync="departShow" style="width: 500px;height: 800px;margin-left: 500px">
                        <el-tree
                                :data="departList"
                                :props="defaultProps"
                                :expand-on-click-node="false"
                                node-key="id"
                                @node-click="getDepartValue"
                                :draggable="true"
                                @node-contextmenu="contextmenu"
                                ref="menuTree"
                                style="width: 200px"
                        >
                        </el-tree>
                    </el-dialog>
                    <!--数据-->
                    <el-table
                            v-loading="peopleLoading"
                            border
                            :data="peopleData"
                            element-loading-text="数据加载中"
                            fit
                            highlight-current-row
                            @selection-change="handleSelectionChange"
                            style="width: 97%">
                        <el-table-column
                                align="center"
                                type="selection"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="ozId"
                                label="序号"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="bname"
                                label="姓名"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="departmentName"
                                label="部门"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="positionName"
                                label="岗位"
                                width="70">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="phone"
                                label="手机号码"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="number"
                                label="工号"
                                width="130">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="idNumber"
                                label="证件号"
                                width="100">
                        </el-table-column>
                        <el-table-column align="center" label="员工类型" width="100">
                            <template slot-scope="p">
                                {{ p.row.employeeStatus === 1 ? "正式" : "试用" }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="schemeName"
                                label="当前方案"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="declaration"
                                label="申报基数"
                                width="100">
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <el-pagination
                            :current-page.sync="map.socialDto.page"
                            :page-size="map.socialDto.pagesize"
                            :page-sizes="[10, 20, 30, 40]"
                            :total="peopleDataTotal"
                            background
                            layout="total, sizes ,prev, pager, next, jumper"
                            style="padding: 30px 0; text-align: center"
                            @current-change="findAllSocial"
                            @size-change="handleSizeChanges"
                    />
                </el-dialog>
            </div></el-col>
        </el-row>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
        //这里存放数据
            return {
                //部门数据展示
                departShow:false,
                //全查数据
                socialData:[],
                //分页数据
                pages:{
                    page:1,
                    pagesize:10
                },
                //总条数
                total:0,
                //是否显示loading信息
                listLoading: true,
                peopleLoading: true,
                //修改方案状态数据
                upStatus:{
                    socialId:0,
                    status:null
                },
                //控制打开关联人员信息弹窗
                socialPeople:false,
                //查询人员信息需要用的数据
                map:{
                    socialId:null,
                    departmentName:null,
                    departmentId:null,
                    staffType:null,
                    mess:null,
                    socialDto:{
                        page:1,
                        pagesize:10
                    }
                },
                //关联人员数据
                peopleData:[],
                //关联人员数据总条数
                peopleDataTotal:0,
                //部门数据
                departList:[],
                defaultProps: {
                    children: "children",
                    label: "departName"
                },
                //批量删除的id数组
                ids:[],
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            handleEdit(id){
                this.$router.push({
                    path: '/upSocialSetup',
                    query: {
                        id: id,
                    }
                })
                },
            insets(){
                this.$router.push({
                    path: '/socialSetup',
                })
            },
            //批量删除
            deleteBatch(){
                if(this.ids.length==0){
                    this.$message({
                        showClose: true,
                        message: '请选择要删除的方案',
                        type: 'warning'
                    });
                }else {
                    this.request.post("/salary/social/deleteBatch",this.ids)
                    .then(res=>{
                        if(res.code == 500){
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'warning'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                        }
                    })
                }
            },
            //重置
            resetting(){
              this.map.departmentName = null
              this.map.staffType = null
              this.map.mess = null
              this.selstaffBySocial()
            },
            //当部门被选中时
            getDepartValue(data){
                this.map.departmentName = data.departName
                this.departShow = false
            },
            //开启部门树形选择
            openMenus(){
                this.departShow = true
            },
            //当部门被选中时
            contextmenu(event,data,node){
                this.node = node
                this.data = data
            },
            //根据方案ID查询关联人员信息
            openSocialPeople(saId){
                this.map.departmentName = null
                this.map.staffType = null
                this.map.mess = null
                this.socialPeople = true
                this.map.socialId = saId
                this.selAllDepartTree()
                this.selstaffBySocial()
            },
            //树形查询所有部门
            selAllDepartTree(){
                this.request.get("/staff/department/selAllDepartTree")
                .then(res=>{
                    this.departList = res.data
                })
            },
            //根据方案ID分页模糊查询关联人员信息
            selstaffBySocial(){
                this.request.post("/salary/social/findWithSocialPer",this.map)
                    .then(res=>{
                        this.peopleLoading = false
                        this.peopleData = res.data.items
                        this.peopleDataTotal = res.data.counts
                    })
            },
            //逻辑删除方案数据
            deleteSocial(row) {
                if (row.status == true) {
                    this.$message({
                        showClose: true,
                        message: '使用中方案，不可删除！',
                        type: 'warning'
                    });
                } else if (row.relatedPerson != null) {
                    this.$message({
                        showClose: true,
                        message: '当前方案已经关联人员，不可删除！',
                        type: 'warning'
                    });
                } else {
                    this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    this.request.get("salary/social/delete/" + row.saId)
                        .then(res => {
                            this.$message({
                                showClose: true,
                                message: '删除' + row.schemeName + '成功',
                                type: 'success'
                            });
                            this.findAllSocial()
                        })
                        .catch((response) => {
                            // 失败
                            if (response === "cancel") {
                                this.$message({
                                    type: "info",
                                    message: "已取消删除",
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: "删除失败",
                                })
                            }
                        })
                }
            },
            //控制开关修改方案状态
            switchSale(status,saId){
                    this.upStatus.socialId = saId
                    this.upStatus.status = status
                    this.request.post("/salary/social/updateSocialStatus",this.upStatus)
            },
            //批量操作
            handleSelectionChange(val) {
                for (let i = 0; i < val.length; i++) {
                    this.ids.push(val[i].saId)
                }
            },
            //分页跳转数据
            handleSizeChange(pageSize) {
                this.pages.pagesize = pageSize;
                this.findAllSocial();
            },
            //分页跳转数据
            handleSizeChanges(pageSize) {
                this.map.socialDto.pagesize = pageSize;
                this.selstaffBySocial();
            },
            //分页查询社保方案
            findAllSocial(){
                this.request.post("/salary/social/findAllSocial",this.pages)
                .then(res=>{
                   this.socialData = res.data.items
                   this.total = res.data.counts
                   this.listLoading = false  //记得：否显示loading信息
                })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.findAllSocial()
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        },
        beforeCreate() {}, //生命周期 - 创建之前
        beforeMount() {}, //生命周期 - 挂载之前
        beforeUpdate() {}, //生命周期 - 更新之前
        updated() {}, //生命周期 - 更新之后
        beforeDestroy() {}, //生命周期 - 销毁之前
        destroyed() {}, //生命周期 - 销毁完成
        activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style scoped>


</style>
